<template>  
  <div>  
    <input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加待办事项" />  
    <button @click="addTodo">添加</button>  
  
    <div v-for="(todo, index) in todos" :key="index">  
      <TodoItem  
        :title="todo.title"  
        :completed="todo.completed"  
        @update:completed="updateTodoCompleted(index, $event)"  
        @remove-todo="removeTodo(index)"  
      />  
    </div>  
  </div>  
</template>  
  
<script>  
import TodoItem from './components/TodoItem.vue'
  
export default {  
  name: 'TodoList',  
  components: {  
    TodoItem  
  },  
  data() {  
    return {  
      todos: [  
        // 初始数据可以放在这里，例如: { title: '学习 Vue', completed: false }  
      ],  
      newTodoTitle: ''  
    };  
  },  
  methods: {  
    addTodo() {  
      if (this.newTodoTitle.trim()) {  
        this.todos.push({ title: this.newTodoTitle, completed: false });  
        this.newTodoTitle = '';  
      }  
    },  
    removeTodo(index) {  
      this.todos.splice(index, 1);  
    },  
    updateTodoCompleted(index, completed) {  
      this.todos[index].completed = completed;  
    }  
  }  
}  
</script>  
  
<style scoped>  
/* 样式可以根据需要添加 */  
</style>
